<script>
/**
 * Example:
 *
 * ```javascript
 * import SpinDot from "@/components/loading/SpinDot.vue";
 * const show = ref(true);
 * ```
 *
 * ```html
 *  <n-spin :rotate="false" :show="show">
 *     <template #icon>
 *       <spin-dot size="lg"/>
 *     </template>
 *     <template #description>
 *       Loading...
 *     </template>
 *     <template #default>
 *       <div style="width: 100%;height:300px;">
 *         加载动画<br/>
 *       </div>
 *     </template>
 *  </n-spin>
 *  <n-button @click="show = !show">开启/关闭</n-button>
 * ```
 */
</script>
<script setup>

const props = defineProps({
  size: {//尺寸
    type: String,
    validator(value, props) {
      // The value must match one of these strings
      return ['lg', 'md', 'sm'].includes(value);
    },
    default: 'lg'
  }
})

</script>

<template>
  <div class="ui-spindot">
    <div :class="[ 'ui-spin', 'ui-spin-spinning', 'ui-spin-' + props.size ]">
        <span class="ui-spin-dot ui-spin-dot-spin">
          <i class="ui-spin-dot-item"></i>
          <i class="ui-spin-dot-item"></i>
          <i class="ui-spin-dot-item"></i>
          <i class="ui-spin-dot-item"></i>
        </span>
    </div>
  </div>
</template>

<style scoped lang="less">
@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@keyframes antRotate {
  to {
    transform: rotate(1turn);
  }
}

.ui-spindot {
  --ui-spin-dot-size-sm: 22px;
  --ui-spin-dot-size: 27px;
  --ui-spin-dot-size-lg: 32px;

  max-width: 100%;
  width: fit-content;
  height: fit-content;

  .ui-spin {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.57142857;
    list-style: none;
    font-feature-settings: "tnum";
    font-feature-settings: var(--ui-font-feature-settings-base), "tnum",;
    position: absolute;
    display: none;
    color: #18a058;
    color: var(--primary-color);
    text-align: center;
    vertical-align: middle;
    opacity: 0;
    transition: transform .3s cubic-bezier(.78, .14, .15, .86);

    .ui-spin-dot {
      position: relative;
      //display: inline-block;
      display: block;
      font-size: var(--ui-spin-dot-size);
      width: 1em;
      height: 1em;

      &-item {
        position: absolute;
        display: block;
        width: 12px;
        height: 12px;
        background-color: var(--primary-color);
        border-radius: 100%;
        transform: scale(.75);
        transform-origin: 50% 50%;
        opacity: .3;
        animation: antSpinMove 1s linear infinite alternate;

        &:first-child {
          top: 0;
          left: 0;
        }

        &:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: .4s;
        }

        &:nth-child(3) {
          right: 0;
          bottom: 0;
          animation-delay: .8s;
        }

        &:nth-child(4) {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
        }

      }

    }

    .ui-spin-dot-spin {
      transform: rotate(0deg);
      animation: antRotate 1.2s linear infinite;
    }
  }

  .ui-spin-lg .ui-spin-dot {
    font-size: var(--ui-spin-dot-size-lg);
  }

  .ui-spin-lg .ui-spin-dot i {
    width: 14px;
    height: 14px;
  }

  .ui-spin-sm .ui-spin-dot {
    font-size: var(--ui-spin-dot-size-sm);
  }

  .ui-spin-sm .ui-spin-dot i {
    width: 10px;
    height: 10px;
  }

  .ui-spin-spinning {
    position: static;
    //display: inline-block;
    display: block;
    opacity: 1;
  }

  //end
}
</style>